<script setup lang="js">
import {nextTick, onMounted, ref} from 'vue'
import {useRoute} from 'vue-router'
import { fetchMenuTreelist} from "@/api/menu.js";
import {allocRoleMenu, listMenuByRole} from "@/api/roleList.js";

const route = useRoute()
const menuTreeList = ref([])
const defaultProps = {
  children: 'children',
  label: 'title',
}
const treeRef = ref('')
const roleId = ref(null)

onMounted(() => {
  roleId.value = route.query.roleId;
  getTreeList();
  getRoleMenu(route.query.roleId);
})

const getTreeList = () => {
  fetchMenuTreelist().then(res => {
    menuTreeList.value = res.data.data;
  })
}

const getRoleMenu = (roleId) => {
  listMenuByRole(roleId).then(res => {
    let menuList = res.data.data;
    console.log(menuList);
    let checkedMenuIds=[];
    if (menuList!= null && menuList.length > 0) {
      for (let i = 0; i < menuList.length; i++) {
        let menu = menuList[i];
        if(menu.parentId!==0){
          checkedMenuIds.push(menu.id);
        }
      }
    }
        treeRef.value.setCheckedKeys(checkedMenuIds);
  })
}

</script>

<template>
  <div class="alloc-menu">
    <el-card style="width: 500px;" shadow="never">
      <el-tree
          :data="menuTreeList"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          highlight-current
          :props="defaultProps"
      >

      </el-tree>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.alloc-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 20px;
}
</style>